<template>
  <div class="my-select-box">
    <el-select
        v-model="selectValue" :placeholder="placeholder" clearable
        :size="size" :style="'width:'+ width+'px'" @change="change">
      <el-option v-for="(item,index) in option" :key="index"
                 :label="item.label" :value="String(item.value)"/>
    </el-select>
  </div>
</template>

<script>

export default {
  props: {
    modelValue: {
      type: [String, Number],
      default: ""
    },
    width: {
      type: Number,
      default: 240
    },
    placeholder: {
      type: String,
      default: ""
    },
    size: {
      type: String,
      default: "default"
    },
    option: {
      type: Array,
      default: [{label:"",value:""}]
    }
  },
  emits: ['changeValue'],
  mounted() {
    this.selectValue = String(this.modelValue);
  },
  data() {
    return {
      selectValue: "",
      selectOption: [],
    }
  },
  watch: {
    "modelValue": {
      handler(newVal, oldVal) {
        this.selectValue = String(newVal);
      }
    },
  },
  methods: {
    change() {
      this.$emit('update:modelValue', this.selectValue);
      this.$emit("changeValue", this.selectValue);
    }
  }
}
</script>

<style scoped lang="scss">

</style>